<template>
  <div class="home wc hc">
    <div  class="card">
      <div class="card-head">点点橙投放管理平台</div>
      <div>
        <el-input
          placeholder="请输入账号"
          prefix-icon="el-icon-user"
          v-model="form.name">
        </el-input>
        <el-input
          style="margin-top:20px;"
          placeholder="请输入密码"
          prefix-icon="el-icon-unlock"
          v-model="form.password">
        </el-input>
        <el-button @click="submit" style="margin-top:20px;width:100%" type="primary">登陆</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import Cookie from "../../utils/cache";
import { computed, defineComponent,ref,toRefs,onMounted,reactive,watch,getCurrentInstance } from 'vue'
export default defineComponent({
  setup(props) {
    const { proxy } = getCurrentInstance()
    const data = reactive({
      form:{}
    })
    const submit = async () => {
      if (!data.form.name) {
        return proxy.$message("请输入账号")
      }
      if (!data.form.password) {
        return proxy.$message("请输入密码")
      }
      let res = await proxy.$post('v1/admin_user/login',data.form)
      if (res.data.token) {
        Cookie.set("authorization",res.data.token)
        proxy.$router.push("/")
      }
    }
    return{
      ...toRefs(data),
      submit
    }
  }
})
</script>
<style lang="less" scoped>
.home{
  background:rgba(248,248,248,1);min-height: calc(100vh);
  overflow: hidden;
  background-size: cover;
  position: relative;
  background-image: url(https://www.bing.com/th?id=OHR.LakeWinnipeg_ZH-CN0984485385_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp);
}
.card-head{
  margin: 20px 0;
  font-size: 30px;
  height: 30px;
  line-height: 30px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
.card{
  padding: 0 20px;
  position: absolute;
  top: 50%;
  right: 160px;
  -webkit-transform: translateY(-60%);
  transform: translateY(-60%);
  width: 300px;
  margin: auto;
  // background: red;
  border: none;
}
</style>
